<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="divWarehouse">
    <div class="divContent">
      <el-form class="form-x" ref="form" :model="form" label-width="80px">
        <el-row style="height: 98px; margin-left: -15px; margin-right: -15px">
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">货品编码</div>

            <el-input
              clearable
              :disabled="true"
              v-model="form.code"
              placeholder="请输入"
            ></el-input>
          </el-col>

          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">货品类型</div>

            <el-input
              clearable
              v-model="form.goodsTypeName"
              placeholder="请输入"
            ></el-input>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">货品名称</div>

            <el-input
              clearable
              v-model="form.name"
              placeholder="请输入"
            ></el-input>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">货品条码</div>

            <el-input
              clearable
              v-model="form.barCode"
              placeholder="请输入"
            ></el-input>
          </el-col>
        </el-row>
        <el-row style="height: 98px; margin-left: -15px; margin-right: -15px">
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">货主</div>

            <el-input
              clearable
              v-model="form.ownerName"
              placeholder="请输入"
            ></el-input>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">质检方式</div>

            <el-select
              clearable
              style="width: 100%"
              v-model="form.inspectionType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in inspectionType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">温度要求</div>

            <el-select
              clearable
              style="width: 100%"
              v-model="form.temperatureType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in temperatureType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">承重要求</div>

            <el-select
              clearable
              style="width: 100%"
              v-model="form.bearingType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in bearingType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row style="height: 98px; margin-left: -15px; margin-right: -15px">
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">体积</div>

            <el-input clearable v-model="form.volume" placeholder="请输入">
              <i slot="suffix" class="dw">m³</i>
            </el-input>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">指定专区</div>

            <el-select
              clearable
              style="width: 100%"
              v-model="form.areaName"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in uesList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">单价</div>

            <el-input clearable v-model="form.price" placeholder="请输入">
              <i slot="suffix" class="dw">元</i>
            </el-input>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">单位</div>

            <el-input
              clearable
              v-model="form.unit"
              placeholder="请输入"
            ></el-input>
          </el-col>
        </el-row>
        <el-row style="height: 98px; margin-left: -15px; margin-right: -15px">
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">保质天数</div>

            <el-input
              clearable
              v-model="form.guaranteeDay"
              placeholder="请输入"
            >
              <i slot="suffix" class="dw">天</i>
            </el-input>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-form-item>
            <el-button style="width: 170px" @click="$router.go(-1)" round
              >返回</el-button
            >
            <el-button
              style="width: 170px"
              type="warning"
              round
              @click="onSubmit"
              >提交</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { postWare, putWare } from '@/api/warehouse'
import { Kw, warehouse, areaList } from '@/api/location'
export default {
  data () {
    return {
      props: {
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node
          console.log(node)
          if (level === 0) {
            warehouse({ status: 1 }).then((res) => {
              console.log(res.data.data)
              resolve(
                res.data.data.map((item) => {
                  return { value: item.id, label: item.name, leaf: level >= 1 }
                })
              )
            })
          } else {
            areaList({ warehouseId: node.data.value, status: 1 }).then(
              (res) => {
                console.log(res.data.data)
                resolve(
                  res.data.data.map((item) => {
                    return {
                      value: item.id,
                      label: item.name,
                      leaf: level >= 0
                    }
                  })
                )
              }
            )
          }
        }
      },
      WarehouseList: [],
      uesList: [
        { label: '出库缓存区', value: '出库缓存区' },
        { label: '冻结区', value: '冻结区' },
        { label: '存储区', value: '存储区' }
      ],
      temperatureType: [
        { label: '常温', value: 'CW' },
        { label: '冷藏', value: 'LC' },
        { label: '恒温', value: 'HW' }
      ],
      bearingType: [
        { label: '重型', value: 'ZX' },
        { label: '轻型', value: 'QX' },
        { label: '中型', value: 'BX' }
      ],
      inspectionType: [
        {
          value: 'CJ',
          label: '抽检'
        },
        {
          value: 'BCL',
          label: '不处理'
        },
        {
          value: 'QJ',
          label: '全检'
        }
      ],
      // 封装的省市区

      form: {
        code: '',
        status: '1',
        name: '',
        phone: '',
        useType: '',
        temperatureType: '',
        bearingType: ''
      },
      radio: '1'
    }
  },
  async created () {
    this.warehouseList()

    console.log(this.$route.query)
    if (this.$route.query.key) {
      this.form = {
        code: this.$route.query.key.code,

        barCode: this.$route.query.key.barCode,
        goodsTypeName: this.$route.query.key.goodsTypeName,
        name: this.$route.query.key.name,
        ownerName: this.$route.query.key.ownerName,
        inspectionType: this.$route.query.key.inspectionType,
        temperatureType: this.$route.query.key.temperatureType,
        bearingType: this.$route.query.key.bearingType,
        volume: this.$route.query.key.volume,
        areaName: this.$route.query.key.areaName,
        price: this.$route.query.key.price,
        unit: this.$route.query.key.unit,
        guaranteeDay: this.$route.query.key.guaranteeDay
      }
      console.log(this.form)
    } else {
      this.Kw()
    }
  },
  methods: {
    async Kw () {
      const {
        data: { data }
      } = await Kw()

      this.form.code = data
    },
    async warehouseList () {
      const {
        data: { data }
      } = await warehouse()
      for (let i = 0; i < data.length; i++) {
        const a = {}
        a.value = data[i].id
        a.label = data[i].name
        a.children = []
        this.WarehouseList.push(a)
      }
    },
    async onSubmit () {
      console.log(this.form)
      // if (this.$route.query.key) {
      //   for (const key in this.$route.query.key) {
      //     this.form[key] = this.$route.query.key[key]
      //   }
      //   await putWare(this.$route.query.key).then(() => {
      //     this.$router.push('warehouseManagement')
      //   })
      // } else {
      //   await postWare(this.form).then(() => {
      //     this.$router.push('warehouseManagement')
      //   })
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.dw {
  width: 40px;
  height: 40px;
  text-align: center;
  font-style: normal;
  color: #acabab;
  font-weight: bold;
  line-height: 45px;
}
.el-input el-input-group el-input-group--append {
  display: flex;
  justify-content: space-around;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: #ffb200;
  border: #ffb200;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ffb200;
}
.radios {
  margin-top: 50px;
}
.divWarehouse {
  margin: 20px;

  .divContent {
    // height: 500px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    padding-bottom: 0px;
    margin-bottom: 20px;
  }
}
::v-deep .divLable {
  width: 100px;
  height: 40px;
  text-align: left;
  vertical-align: middle;
  line-height: 18px;
  float: left;
  font-size: 8px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
::v-deep.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
::v-deep .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
::v-deep .el-input__inner {
  height: 40px;
  line-height: 40px;
  border: 1px solid #f8f5f5;
  background: #f8f5f5;
  border-radius: 6px;
}
// ::v-deep .el-input--medium .el-input__inner {
//   height: 40px;
//   line-height: 40px;
//   border: 1px solid #f8f5f5;
//   background: #f8f5f5;
//   border-radius: 6px;
// }
::v-deep .el-input .el-input__inner:hover {
  border: 1px solid #686867;
}
::v-deep .el-input .el-input__inner:focus {
  border: 1px solid #ffc12f;
}
</style>
